export const FunnelPlot1 = () => {
    return `

    <template>
    <div
      class="content"
   
    >
     <div :ref="echartsMap" id="mainChina"></div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, nextTick, onMounted, watch } from "vue";
  import "echarts";
  
  const state = reactive({
    option:  {

       
        "legend": {
           show:false
        },
        "grid": {
            "top": "24%",
            left:"10"
        },
        series: [
            {
                name: '',
                type: 'funnel',
                left: '0',
                width: '40%',
                minSize: 84,
                maxSize: 260,
                label: {
               
                              formatter: function(params) {
                                console.log(params)
                        return '{a| '+params.name+'} {b| '+params.value+'个 ('+params.percent+'%)}';
                      },
                      rich: {
                        a: {
                          color: "rgba(211, 228, 254, 1)",
                          fontSize: 16,
                          align: "center",
                          lineHeight: 25,
                          fontWeight: 600,
                        }, 
                        b: {
                          color: "rgba(0, 205, 222, 1)",
                          fontSize: 16,
                          align: "center",
                          lineHeight: 25,
                          fontWeight: 600,
                        },
                      },
                    emphasis: {
                        position:'left',
                        formatter: '{c}%'
                    },
                
                },
                labelLine: {
                    normal: {
                        length: 200,
                        position: 'left',
                        
                        lineStyle: {
                            width:1
                            
                        }
                    }
                },
                itemStyle: {
                  opacity:1,
                     borderWidth: 0,
                    shadowBlur: 5,
                    shadowOffsetX: 0,
                    shadowOffsetY:  2,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                data: [
                    {value:30, name: '访问', 
                        itemStyle: {
                            normal: {
                                color: 'rgba(62, 230, 227, 1)'
                            }
                        },
                       labelLine:{
                           normal: {
                               lineStyle: {
                                   shadowColor: 'rgba(62, 230, 227, 1)',
                                   shadowOffsetX: 1
                               }
                           }
                       }
                    },
                    {value: 25, name: '咨询',
                         itemStyle: {
                            normal: {
                                color: 'rgba(59, 188, 217, 1)'
                            }
                        },
                         labelLine:{
                           normal: {
                               lineStyle: {
                                   shadowColor: 'rgba(59, 188, 217, 1)',
                                   shadowOffsetX: 1
                               }
                           }
                       }
                    },
                    {value: 15, name: '订单',
                         itemStyle: {
                            normal: {
                                color: 'rgba(55, 139, 204, 1)'
                            }
                        },
                         labelLine:{
                           normal: {
                               lineStyle: {
                                   shadowColor: 'rgba(55, 139, 204, 1)',
                                   shadowOffsetX: 1
                               }
                           }
                       }
                    },
                    {value: 15, name: '点击',
                         itemStyle: {
                            normal: {
                                color: 'rgba(55, 139, 204, 1)'
                            }
                        },
                         labelLine:{
                           normal: {
                               lineStyle: {
                                   shadowColor: 'rgba(55, 139, 204, 1)',
                                   shadowOffsetX: 1
                               }
                           }
                       }
                    },
                    {value: 10, name: '展现',
                         itemStyle: {
                            normal: {
                                color: 'rgba(52, 80, 191, 1)'
                            }
                        },
                         labelLine:{
                           normal: {
                               lineStyle: {
                                   shadowColor: 'rgba(52, 80, 191, 1)',
                                   shadowOffsetX: 1
                               }
                           }
                       }
                    }
                ]
            },
            {
                name: '',
                type: 'funnel',
                top:0,
                gap: 10,
                label: {
                    normal: {
                        position: 'inside',
                        formatter: '转化率：({c}%)',
                        textStyle: {
                            color: '#fff'
                        }
                    }
                  
                },
                labelLine: {
                    normal: {
                      
                
                    }
                },
                itemStyle: {
                    normal: {
                        color: 'transparent',
                        borderWidth:0,
                        opacity: 0
                    }
                },
                data: [
                    {value: 60, name: '访问'
                
                    },
                    {value: 40, name: '咨询'},
                    {value: 20, name: '订单'},
                    {value: 80, name: '点击'},
                    {value: 100, name: '展现'}
                ]
            }
        ]
    }
    
  });
  let echartsMapel = ref("");
  let opt = null;
  const echartsMap = (e) => (echartsMapel.value = e);
  const init = () => {
    let myChart = echarts.init(echartsMapel.value);
    myChart.setOption(state.option);
    const setOption = (dataObj) => {
      let opt = myChart.getOption();
      Object.assign(opt, dataObj);
      myChart.setOption(opt);
    };
    return setOption;
  };
  
  onMounted(() => {
    init();
  });
  </script>
  
  <style scoped >
  .content {
    position: relative;
    width: 100%;
    box-shadow: 0px 3px 50px 1px rgba(0, 101, 175, 0.4);
  }
  #mainChina {
    width: 100%;
    height: 600px;
    background-color: #00184F;
  }
  </style>
  
  
    
    `;
  };
  